<template>
  <view class="navbar jh-align-center jh-row jh-space-between padding-t8" :style="{borderBottom: borderBottom ? '1px solid #CFD4D6' : ''}">
    <view v-if="backBtn" class="navbar-left" @tap="onBack">
      <image style="width: 9px;height: 16px;display: block;" :src="ossDomain + '/icon-bg.png'"></image>
    </view>
    <view v-else class="navbar-left2 jh-flex-center jh-row" @tap='onClickLeft'><slot name="left"></slot></view>
    <view class="jh-flex-center jh-row">
      <!-- #ifdef APP-NVUE -->
      <jh-text :size="titleSize + 'px'" :color="titleColor || '#F7F8F8'" type="Bold" :value="title"></jh-text>
      <!-- #endif -->
      <!-- #ifndef APP-NVUE -->
      <text class="font-B" :style="{fontSize: titleSize + 'px', color:titleColor|| '#F7F8F8'}">{{title}}</text>
      <!-- #endif -->
      <image class="titleImg" v-if="titleImg" :src="titleImg" mode="widthFix"></image>
    </view>
    <view class="navbar-right jh-flex-center jh-row" @tap="onClickRight"><slot name="right"></slot></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ossDomain: uni.ossDomain
    };
  },
  props: {
    backBtn: {
      type: Boolean,
      default: true
    },
    /**
     * 中心文字
     */
    title: {
      type: String,
      default: ''
    },
    titleImg: {
      type: String,
      default: ''
    },
    borderBottom: {
      type: Boolean,
      default: true
    },
    titleSize: {
      type: String | Number,
      default: '14'
    },
    titleColor: {
      type: String,
      default: '#00374D'
    },
  },
  computed: {},

  mounted() {

  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    /**
     * 左侧按钮点击事件
     */
    onClickLeft() {
      this.$emit('clickLeft');
      // this.$emit('click-right')
    },
    /**
     * 右侧按钮点击事件
     */
    onClickRight() {
      this.$emit('clickRight');
      // this.$emit('click-right')
    },
  }
};
</script>

<style scoped lang="scss">
.navbar {
  height: 50px;
  width: 100%;
  // #ifdef APP-NVUE
  box-sizing: border-box;
  // #endif 
  &-left{
    padding: 17px 20.5px;
  }
  &-left2{
    // #ifdef APP-NVUE
    height: 50px;
    width: 50px;
    // #endif
    // #ifndef APP-NVUE
    min-width: 50px;
    // #endif
  }
  &-right{
    // #ifdef APP-NVUE
    height: 50px;
    width: 50px;
    // #endif
    // #ifndef APP-NVUE
    min-width: 50px;
    // #endif
  }
}
.titleImg{
  width: 200px;
  // #ifndef APP-NVUE
  display: block;
  // #endif
}
</style>
